<template>
    <div>
        <el-card class="box-card">
   <!-- 顶部form表单 -->
   <template>
    <questions :list="list" @hsearch="hsearch"></questions>
   </template>
   <!-- 标签页 -->
   <el-row>
    <el-col>
      <el-tabs type="card" @tab-click="doClick">
        <el-tab-pane label="全部" name="1"></el-tab-pane>
        <el-tab-pane label="待审核" name="2"></el-tab-pane>
        <el-tab-pane label="已审核" name="3"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="4"></el-tab-pane>
      </el-tabs>
    </el-col>
   </el-row>
   <!-- 提示栏 -->
   <el-row>
     <el-col>
       <el-alert title="数据共1条" type="info" show-icon></el-alert>
     </el-col>
   </el-row>
   <br>
   <!-- 底部表格 -->
   <el-table :data="list" border style="width: 100%" :default-sort="{prop: 'id',order:'descending'}">
    <el-table-column sortable prop="id" label="试题编号" width="140"> </el-table-column>
    <el-table-column prop="subject" label="学科" width="180"> </el-table-column>
    <el-table-column prop="catalog" label="目录" width="180"> </el-table-column>
    <el-table-column  label="题型" width="180">
      <template v-slot="scope">
        {{ questionTypeFormatting(scope.row.questionType)}}
      </template>
    </el-table-column>
    <el-table-column  label="题干" width="240">
      <template v-slot="scope">
        <span v-html="scope.row.question"></span>
      </template>
    </el-table-column>
   <el-table-column prop="addDate" label="录入时间" width="180">
  <template v-slot="scope">
   <span>{{ dateFormatting(scope.row.addDate) }}</span>
    </template>
    </el-table-column>
    <el-table-column  label="难度" width="180">
      <template v-slot="scope">
        {{ difficultyFormatting(scope.row.difficulty)}}
      </template>
    </el-table-column>
    <el-table-column prop="creator" label="录入人" width="180"> </el-table-column>
     <el-table-column prop="chkState" label="审核状态" width="180"> </el-table-column>
     <el-table-column prop="chkRemarks" label="审核意见" width="180"> </el-table-column>
     <el-table-column prop="chkUser" label="审核人" width="180"> </el-table-column>
     <el-table-column prop="publishState" label="发布状态" width="180"> </el-table-column>
     <el-table-column label="操作" width="240" fixed="right">
      <template v-slot="scope">
        <el-button type="text" @click="hPreview(scope.row)">预览</el-button>
        <el-button type="text" :disabled="scope.row.chkState !=='待审核'||scope.row.publishState!=='已下架'" @click="hAudit(scope.row)">审核</el-button>
        <el-button type="text" :disabled="scope.row.publishState!=='已下架'" @click="change(scope.row)">修改</el-button>
        <el-button type="text" @click.native="hPublishState(scope.row)">{{scope.row.publishState==='已下架'?'上架':'下架'}}</el-button>
        <el-button type="text" @click="hDel(scope.row)" :disabled="scope.row.publishState !=='已下架'">删除</el-button>
      </template>
     </el-table-column>
   </el-table>
   <!-- 底部分页栏 -->
   <el-row type="flex" justify="end">
      <el-pagination
        layout="total,prev, pager, next, sizes,jumper"
        :page-size="params.pagesize"
        :total="counts"
        :page-sizes="[5,10,20,50]"
        :current-page.sync="params.page"
         @size-change="hSizeChange"
         @current-change="hCurrentChange"
        > </el-pagination>
      </el-row>
    </el-card>

<el-dialog title="题目预览"
:visible.sync="showDialog"
:close-on-click-modal="false"
:close-on-press-escape="false"
:modal="true"
>
<preview @dialogClose="dialogClose" ref="refPreview" :previewIdList="previewIdList"></preview>
</el-dialog>

<el-dialog title="题目审核"
:visible.sync="showVedit"
width="25%"
:close-on-click-modal="false"
:close-on-press-escape="false">
<el-radio-group v-model="vedit.chkState">
  <el-radio
  v-for="(item,index) in radioType"
  :key="index"
  :label="item.value">
  {{item.label}}
  </el-radio>
  </el-radio-group>

  <el-input v-model="vedit.chkRemarks" type="textarea" placeholder="请输入审核意见" class="yijian"></el-input>

  <el-row type="flex" justify="end">
    <el-button @click="showVedit = false">取 消</el-button>
    <el-button type="primary" @click="hVedit">确 定</el-button>
  </el-row>
</el-dialog>
</div>
</template>

<script>
// 引入事件优化
import { parseTime } from '@/utils/index.js'
// 导入弹框组件
import preview from '../components/preview.vue'
// 导入form表单组件
import questions from '@/components/questions/questions-form'
// 导入封装的ajax请求函数
import { choice, remove, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'
// 导入封装的组件函数 : 格式化处理请求回的数据
import { questionType, difficulty, chkType, publishType } from '@/api/hmmm/constants.js'
export default {
  components: { questions, preview },
  data () {
    return {
      showDialog: false,
      previewIdList: [], // 预览点击的id
      list: [],
      params: {
        page: 0,
        pagesize: 5
      },
      counts: 0,
      choiceState: 0,
      radioType: [
        {
          value: 1,
          label: '通过'
        },
        {
          value: 2,
          label: '拒绝'
        }
      ],
      vedit: {
        chkState: 1,
        chkRemarks: '',
        id: ''
      },
      showVedit: false,
      isVedit: true,
      publish: {
        id: '',
        publishState: ''
      }
    }
  },
  // 初始加载精选题库列表
  created () {
    this.loadList()
  },
  methods: {
    // 分页跳转当前点击的页数
    hCurrentChange (val) {
      this.params.page = val
      this.loadList()
      // console.log('当前页数',this.params.page)
    },
    // 分页调整每页显示调试
    hSizeChange (val) {
      this.params.pagesize = val
      this.loadList()
      console.log('当前每页条', this.params.pagesize)
    },
    // 审核状态切换
    getChkState (data) {
      data.forEach(item => {
        chkType.forEach(itm => {
          if (item.chkState === itm.value) {
            item.chkState = itm.label
          }
        })
      })
    },
    // 发布状态切换
    getPublishState (data) {
      data.forEach(item => {
        publishType.forEach(itm => {
          if (item.publishState === itm.value) {
            item.publishState = itm.label
          }
        })
      })
    },
    // 初始加载精选题库列表
    async loadList () {
      try {
        // 调用导入的ajax函数
        const { data: res } = await choice(this.params)
        // console.log('精选题库列表' , res)
        await this.getChkState(res.items)
        await this.getPublishState(res.items)
        // 数据回填
        this.list = res.items
        this.page = res.page
        // this.pagesize = res.pagesize
        this.counts = res.counts
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 格式化处理精选题库题型数据
    questionTypeFormatting (value) {
      const item = questionType.find(item => item.value == value)
      if (item) {
        return item.label
      }
    },
    // 格式化处理基础题库难度数据
    difficultyFormatting (value) {
      const item = difficulty.find(item => item.value == value)
      if (item) {
        return item.label
      }
    },
    // 点击删除按钮
    hDel (data) {
      this.$confirm('确定要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(data)
      }).catch(() => {

      })
    },
    // 封装删除功能函数
    async doDel (data) {
      // 调用删除函数
      await remove(data)
      // 弹窗提示
      this.$message.success('删除成功')
      // 刷新页面
      this.loadList()
    },

    // 子传父传递一个事件和一个筛选后的数组res
    hsearch (res) {
      this.list = res
    },
    // 预览点击事件
    hPreview (list) {
      // console.log(list)
      this.previewIdList = list
      // console.log(this.previewIdList)
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs.refPreview.getPreviewList()
      })
    },
    // 格式化处理录入时间
    dateFormatting (date) {
      return parseTime(date)
    },
    // 子传父关闭弹框
    dialogClose () {
      this.showDialog = false
    },
    // 审核按钮点击事件
    hAudit (list) {
      this.showVedit = true
      this.vedit.id = list.id
    },
    // 审核接口调用
    async getAudit () {
      try {
        const res = await choiceCheck(this.vedit)
        //  console.log(res)
        this.$message.success('操作成功')
        this.showVedit = false
        this.loadList()
      } catch (err) {
        console.log(err)
      }
    },
    // 审核弹框确认按钮
    hVedit () {
      if (this.vedit.chkRemarks === '') {
        return this.$message.warning('请输入审核意见')
      }
      this.getAudit()
    },
    // 上/下架按钮点击事件
    hPublishState (list) {
      this.publish.id = list.id
      publishType.forEach(item => {
        if (item.label !== list.publishState) {
          this.publish.publishState = item.value
        }
      })
      this.$confirm(`您确定${list.publishState === '已下架' ? '上架' : '下架'}这道题目吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getChoicePublish()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 调用上下架接口
    async getChoicePublish () {
      try {
        const res = await choicePublish(this.publish)
        console.log(res)
        this.loadList()
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 修改点击事件
    change (data) {
      // 通过路径传递当前需要修改的题目id值
      this.$router.push(`/questions/new?id=${data.id}`)
      // 把当前需要修改的题目传递到vuex保存
      this.$store.commit('detail', data)
    },
    // 全部点击事件
    all () {
      this.loadList()
    },
    // 待审核点击事件
    async hNoAudited () {
      await this.loadList()
      this.list = this.list.filter(item => item.chkState === '待审核')
    },
    // 已审核点击事件
    async hAudited () {
      await this.loadList()
      this.list = this.list.filter(item => item.chkState === '已审核')
    },
    // 已拒绝点击事件
    async hRefuse () {
      await this.loadList()
      this.list = this.list.filter(item => item.chkState === '已拒绝')
    },
    doClick (tab, event) {
      console.log(tab, event)
      if (tab.name === '1') {
        this.all()
      } else if (tab.name === '2') {
        this.hNoAudited()
      } else if (tab.name === '3') {
        this.hAudited()
      } else if (tab.name === '4') {
        this.hRefuse()
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.yijian {
    display: flex;
    margin-top: 20px;
    margin-bottom: 40px;
}
</style>
